<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>图书借阅积分系统</title>
  <style>
    body{font-family:Arial,Helvetica,sans-serif;margin:40px;background:#f7f9fc}
    .panel{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.1);max-width:600px;margin:auto}
    h2{color:#005dab}
    label{display:inline-block;width:100px;margin:8px 0}
    input[type=text],input[type=number]{width:220px;padding:6px}
    button{padding:8px 18px;margin-left:10px;cursor:pointer}
    pre{background:#eef;padding:10px;border-radius:4px;overflow:auto}
  </style>
</head>
<body>
  <div class="panel">
    <h2>新增借阅积分</h2>
    <label>读者姓名</label>
    <input id="reader" placeholder="reader_zhangsan"/>
    <label>图书ISBN</label>
    <input id="isbn" placeholder="978-7-111-12345-8"/>
    <label>积分</label>
    <input id="pts" type="number" value="10"/>
    <button onclick="addRecord()">提交</button>
    <pre id="addRes"></pre>
  </div>

  <div class="panel" style="margin-top:20px">
    <h2>查询借阅积分</h2>
    <label>读者姓名</label>
    <input id="qReader" placeholder="留空查全部"/>
    <label>ISBN</label>
    <input id="qIsbn" placeholder="留空查全部"/>
    <button onclick="queryRecords()">查询</button>
    <pre id="qRes"></pre>
  </div>

  <script>
    const host = 'http://localhost:8080'; // 按实际端口调整
    async function addRecord(){
      const body = {
        reader_name: document.getElementById('reader').value,
        book_isbn: document.getElementById('isbn').value,
        points: Number(document.getElementById('pts').value)
      };
      const res = await fetch(`${host}/api/v1/points`,{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify(body)
      });
      const txt = await res.text();
      document.getElementById('addRes').textContent = res.status===200?'新增成功':txt;
    }
    async function queryRecords(){
      const params = new URLSearchParams();
      const r = document.getElementById('qReader').value;
      const i = document.getElementById('qIsbn').value;
      if(r) params.append('reader',r);
      if(i) params.append('isbn',i);
      const res = await fetch(`${host}/api/v1/points?`+params);
      const data = await res.json();
      document.getElementById('qRes').textContent = JSON.stringify(data,null,2);
    }
  </script>
</body>
</html>